<template>
 <div>
        <p class="title">影院列表</p>
        
        <div class="oneCinema" v-for="(info,index) in cinemaInfos" :key="index">
          <div class="cinema">
            <div class="cname">{{info.cinema.name}}</div>
            <div class="address">{{info.cinema.address}}</div>
          </div>
          <div class="buy">
            <span class="price">￥{{info.price}}起</span>
             <button class="but" :value="info.room.cid" @click="buyByCinema(info.room.cid)">选座购票</button>
            <!-- <input class="but" :value="info.room.cid" type="button" value="选座购票" style="width:40px;border: 0;border-radius:11px;background-color: red;" > -->
          </div>
        </div>
    </div>
</template>

<script>
   import axios from 'axios'
export default {
  name: "Yy",
  data(){
        return{
          cinemaInfos:[],
    
        }
      },
      methods:{
        buyByCinema(cid){
          this.$store.commit('sendCid',cid);
          this.$store.commit('filmId',"");
          this.$router.push('/yanchu');
          console.log("00000");
        }
      },
      created() {
        axios.get("http://localhost:8888/plan").then(({data}) => {
          this.cinemaInfos = data;
          console.log(this.cinemaInfos);
        });
        
        
    }
};
</script>

<style  scoped>
.title{
  border-bottom: 1px solid rgb(206, 205, 204);
}
.oneCinema{
  height: 80px;
  border-bottom: 1px solid rgb(206, 205, 204);
}
.cinema{
  width: 370px;
  height: 100%;
  float: left;
  position: relative;
  top: 10px;
}
.cname{
  font-size: 18px;
  font-weight: 600;
  
}
.address{
  font-size: 9px;
  font-weight: 200;
  color: rgb(165, 162, 162);
}
.buy{
  height: 100%;
  float: right;
  position: relative;
  right: 35px;
  top: 28px;
}
.price{
  font-size: 9px;
  font-weight: 600;
  color: red;
  position: relative;
  right: 35px;
}
.but{
  width: 80px;
  height: 30px;
  border: 0px; 
  color: white;
  background-color: red;
  border-radius: 6px 6px 6px 6px; 
}
</style>